<template>
	<view class="submit-order">
		<an-nav-bar title="订单详情"> </an-nav-bar>
		<view class="content">
			<view v-if="orderDetail.status" class="visitTips flex">
			<view>{{$common.orderStatus(orderDetail.status)}}</view> 
			<view class="shijian" v-if="orderDetail.status == 'IN_SERVICE'" style="margin-left: 100px; font-size: 14px; color: crimson;">
				剩余 {{countdownh}}:{{countdownm}}:{{countdowns}}</view>
			<view class="btn1" v-if="orderDetail.status == 'IN_SERVICE' && orderDetail.serviceProject.addTimeLen > 0 && orderDetail.serviceProject.addTimePrice > 0" @click.stop="addServiceTime"
			style="margin-left: 18px; font-size: 14px; color: white; border-radius: 27px;
			border-color: white; border-style: solid; border-width: 2px;height: 22px; width: 55px; text-align: center;">
			加钟</view>
			</view>
		
			<view class="box top showVisitTips">
				<view class="line time flex_sw">
					<!-- <image src="/static/biao.png" mode=""></image> -->
					<view class="info flex_sw">
						<view class="">服务地址</view>
						<view class="">
							<view v-if="orderDetail && orderDetail.address" style="text-align: right;">
								<view class="ads" style="font-size: 14px;">
									<text>{{ orderDetail.address.title|| orderDetail.address.area}}</text>
									<text>{{orderDetail.address.houseNumber}}</text>
								</view>
								<view class="ads">
									{{orderDetail.address.concatName}}{{orderDetail.address.sex == 1 ?'(先生)':'（女士）'}}+86{{orderDetail.address.mobile}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="line time flex_sw">
					<!-- <image src="/static/biao.png" mode=""></image> -->
					<view class="info flex_sw">
						<view class="">服务时间</view>
						<span class="">{{orderDetail.serviceTime}}</span>
					</view>
				</view>
			</view>
			<view class="box inner">
				<view class="line product flex noMore">
					<image class="logo" :src="imgUrl+orderDetail.projectImg" mode="">
					</image>
					<view class="productInfo">
						<view class="name">{{orderDetail.projectName}}</view>
						<view class="count">x{{orderDetail.buyNum}}</view>
						<view class="price">¥ {{orderDetail.sellPrice}}</view>
					</view>
				</view>
				<view class="line coupon flex_sw" v-if="orderDetail.addPrice > 0">
					<view class="info flex_sw">
						<view class="">加钟金额</view>
						<view class="text">¥ {{orderDetail.addPrice}}</view>
					</view>
				</view>
				
				<view class="line allPrice flex noMore">
					<view class="">合计 ¥{{orderDetail.totalPrice}}</view>
				</view>
			</view>
			<view class="box inner">
				<view class="line coupon flex_sw" @click="$common.goPage('/pages/technicianDetail/technicianDetail?id='+orderDetail.technicianId)">
					<view class="info flex_sw">
						<view class="">服务技师</view>
						<view class="text">{{orderDetail.technicianName}}</view>
					</view>
				</view>
				<view class="line coupon flex_sw" @click="$common.doCall(orderDetail.storeMobile)">
					<view class="info flex_sw">
						<view class="">商家电话</view>
						<view class="text">{{orderDetail.storeMobile}}</view>
					</view>
				</view>
				<view class="line coupon flex_sw">
					<view class="info flex_sw">
						<view class="">项目时长</view>
						<view class="text">{{orderDetail.projectTime}} 分钟</view>
					</view>
				</view>
			</view>
			<view class="box inner">
				<view class="line coupon flex_sw">
					<view class="info flex_sw">
						<view class="">订单编号</view>
						<view class="text">{{orderDetail.sn}}</view>
					</view>
				</view>
				<view class="line coupon flex_sw">
					<view class="info flex_sw">
						<view class="">下单时间</view>
						<view class="text">{{orderDetail.createTime}}</view>
					</view>
				</view>
				<view class="line coupon flex_sw">
					<view class="info flex_sw">
						<view class="">起钟时间</view>
						<view class="text">{{orderDetail.realServiceTime||'--'}}</view>
					</view>
				</view>
				<view class="line coupon flex_sw">
					<view class="info flex_sw">
						<view class="">结束时间</view>
						<view class="text">{{orderDetail.finishTime||'--'}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="note flex_center">
				<text>如商家在未征得您同意的情况下，安排非本人进行服务，您有权拒绝服务，如您未接受服务可申请全额退款。</text>
			</view> -->
			<view class="box remarks">
				<view class="line flex_sw">
					<view class="info flex_sw">
						<view class="">备注</view>
						<span>{{orderDetail.remark||'无'}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom flex">
			<view class="btn" v-if="orderDetail.status == 'NO_PAY'" @click.stop="payOrder(orderDetail)">去付款</view>
			<!-- <view class="btn" v-if="orderDetail.status == 'NO_ACCEPT'">退款</view> -->
			<view class="btn" v-if="orderDetail.status == 'NO_COMMENT'">评价</view>
			<view class="btn" v-if="orderDetail.status == 'NO_SERVICE'" @click.stop="startService">开始服务</view>
		</view>
	</view>
</template>

<script>
	import indexConfig from '@/config/index.config';
	export default {
		data() {
			return {
				imgUrl: indexConfig.imgUrl,
				id: '',
				orderDetail: {},
				countdownh:'',
				countdownm:'',
				countdowns:'',
				timer: null, //重复执行
				order: {
					addressId: "", //服务地址
					storeId: "", //商家id
					serviceTime: "", //服务时间
					projectId: "", //项目id
					buyNum: 1, //购买数量
					orderType: 3, //订单类型：1-线上订单 2-线下订单,3-加钟订单
					technicianId: "", //技师id
					couponId: "", //优惠券Id
					remarks:""
				},
			};
		},
		onLoad(option) {
			if (option.id){
				this.id = option.id
			}
			
			this.getOrder()
					
		},
		methods: {
			submit() {
				this.order.masterSn = this.orderDetail.sn
				this.$http.post('/app/order/order/createOrder', this.order).then(res => {
					uni.redirectTo({
						url: '/pages/pay/pay?id=' + res.data.sn + '&orderType=ORDER'
					})
				})
			},
			showtime () {
				if(!this.orderDetail.realServiceTime)return;
				var nowtime = new Date();  //获取当前时间
				var starttime = new Date(this.orderDetail.realServiceTime);  //起钟时间
				var lefttime = nowtime.getTime() - starttime.getTime(),  //距离结束时间的毫秒数
				ptime = this.orderDetail.projectTime*60*1000,
				lefttime = (lefttime<ptime?(ptime-lefttime):0),
				leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
				lefth = Math.floor((lefttime/(1000*60*60)%24)+leftd*24) < 10 ? "0" + Math.floor((lefttime/(1000*60*60)%24)+leftd*24) : Math.floor((lefttime/(1000*60*60)%24)+leftd*24),  //计算小时数
				leftm = Math.floor(lefttime/(1000*60)%60) < 10 ? "0" + Math.floor(lefttime/(1000*60)%60) : Math.floor(lefttime/(1000*60)%60),  //计算分钟数
				lefts = Math.floor(lefttime/1000%60) < 10 ? "0" + Math.floor(lefttime/1000%60) : Math.floor(lefttime/1000%60);  //计算秒数
				this.countdownh = lefth  //返回倒计时的字符串
				this.countdownm = leftm//返回倒计时的字符串
				this.countdowns = lefts  //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if(lefttime < 0) {
					this.countdownh = this.countdownm= this.countdowns = "00"
				}
			},				
			getOrder(){
				this.$http.get('/app/order/order/' + this.id).then(res => {
					this.orderDetail = res.data
					this.order.addressId = res.data.addressId
					this.order.storeId = res.data.storeId
					this.order.serviceTime = res.data.serviceTime
					this.order.projectId = res.data.projectId
					this.order.technicianId = res.data.technicianId
					
					// IN_SERVICE, NO_ACCEPT
					if(this.orderDetail.status == 'IN_SERVICE') {
						
						this.timer = setInterval(()=>{
							this.showtime()
						})
					}
						
				})
			},
			payOrder(item){
				uni.navigateTo({
					url: '/pages/pay/pay?id=' + item.sn + '&orderType=ORDER'
				})
			},
			changeBuyNum(e) {
				this.order.buyNum = e
				this.calculateOrderPrice()
			},
			calculateOrderPrice() {
				this.$http.post('/app/order/order/calculateOrderPrice', this.order).then(res => {
					this.totalPrice = res.data.totalPrice
				})
			},
			bookTime() {
				uni.navigateTo({
					url: '/pages/bookTime/bookTime'
				})
			},
			toAddress() {
				uni.navigateTo({
					url: '/pages/my/address?tId=' + this.order.technicianId
				})
			},
			setAddress(item) {
				this.order.addressId = item.id
				this.address = item
			},
			setTime(time) {

			},
			startService(){
				uni.showModal({
				    title: '温馨提示',
				    content: '确定开始服务吗？',
				    success: (res) => {
				        if (res.confirm) {
							this.$http.post(`/app/order/order/startService/${this.orderDetail.sn}`).then(res => {
								this.getOrder()
							})
				        } else if (res.cancel) {
				        }
				    }
				})
			},
			addServiceTime(){ //加钟
				uni.showModal({
				    title: '温馨提示',
				    content: '[加钟时长'+this.orderDetail.serviceProject.addTimeLen+'分钟，金额'+this.orderDetail.serviceProject.addTimePrice+'元] 确定要加钟吗？',
				    success: (res) => {
				        if (res.confirm) {
							this.submit()
							
							//this.$http.post(`/app/order/order/addServiceTime/${this.orderDetail.sn}`).then(res => {
							//	this.getOrder()
							//})
							
				        } else if (res.cancel) {
				        }
				    }
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 120rpx;
		background: #fff;
		padding: 0 15px;
		box-sizing: border-box;
		z-index: 999;
		justify-content: flex-end;

		.all {
			color: #333;
			font-size: 30rpx;

			text {
				color: #ff8601;
				font-size: 40rpx;
			}
		}

		.btn {
			width: 220rpx;
			height: 80rpx;
			background: #aa8050;
			border-radius: 40rpx;
			color: #fff;
			line-height: 80rpx;
			font-size: 30rpx;
			margin: 0 0 0 20rpx !important;
			text-align: center;
			&::after {
				border: none;
			}
		}
	}

	.submit-order {

		background-color: #f0f0f0;
		min-height: 100vh;
		overflow: hidden;

		.content {
			padding: 30rpx 20rpx 145rpx;
			position: relative;
			z-index: 100;

			.remarks {
				padding: 0 20rpx 0 30rpx;

				.info {
					flex: 1;

					.ads {
						font-size: 16rpx;

						view {
							height: 40rpx;
							line-height: 40rpx;
						}
					}

					span {
						color: #999;
						font-size: 28rpx;
					}
				}
			}

			.note {
				width: 100%;
				background: #fbf2de;
				padding: 20rpx;
				border-radius: 8rpx;
				margin-bottom: 20rpx;
				box-sizing: border-box;
			}

			.inner {
				padding: 0 10rpx;

				.allPrice {
					justify-content: flex-end;
				}

				.coupon {
					.text {
						color: #999;
						font-size: 28rpx;
					}

					.info {
						flex: 1;
					}
				}



				.fare {}

				.product {
					height: 272rpx;

					&::after {
						display: none;
					}

					.op {
						height: 100%;
						justify-content: flex-end;
						align-items: flex-end !important;
						padding-bottom: 36rpx;
						box-sizing: border-box;
					}

					.productInfo {
						flex: 1;
						color: #666;
						font-size: 30rpx;


						.count {
							color: #999;
							font-size: 26rpx;
							margin: 14rpx 0 40rpx;
						}

						.name {
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.logo {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
				}
			}



			.noMore {
				display: none;

				&::after {
					display: none !important;
				}
			}

			.showVisitTips {

				.line {
					height: 98rpx;
					border-bottom: 2rpx solid #f8f8f8;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 14rpx;
					}
				}

				.technician {
					color: #333;
					font-size: 28rpx;
					justify-content: flex-end;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-left: 10rpx;
					}
				}

				.info {
					flex: 1;
					color: #000;
					font-size: 30rpx;
				}

				.time {
					border-bottom: none;

					span {
						color: #999;
						font-size: 28rpx;
					}

					// &::after {
					// 	display: block;
					// 	content: "";
					// 	width: 14rpx;
					// 	height: 26rpx;
					// 	background: url(/static/grey-arrow-right.png) no-repeat;
					// 	background-size: 100% auto;
					// 	margin-left: 10rpx;
					// 	transform: translateY(1rpx);
					// }
				}

				.address {
					height: 130rpx;

					// &::after {
					// 	display: block;
					// 	content: "";
					// 	width: 14rpx;
					// 	height: 26rpx;
					// 	background: url(/static/grey-arrow-right.png) no-repeat;
					// 	background-size: 100% auto;
					// 	margin-left: 10rpx;
					// 	transform: translateY(1rpx);
					// }


					image {
						width: 24rpx;
						height: 28rpx;
						margin-right: 14rpx;
					}
				}
			}

			.top {
				padding: 0 20rpx;
			}

			.box {
				background: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				box-sizing: border-box;
				margin-bottom: 20rpx;
			}

			.visitTips {
				color: #fff;
				font-size: 40rpx;
				font-weight: 700;
				padding: 30rpx 10rpx;
			}
		}

		.line {
			padding: 0 10rpx 0 20rpx;
			height: 98rpx;
			border-bottom: 2rpx solid #f8f8f8;
			color: #000;
			font-size: 30rpx;

			// &::after {
			// 	display: block;
			// 	content: "";
			// 	width: 14rpx;
			// 	height: 26rpx;
			// 	background: url(/static/grey-arrow-right.png) no-repeat;
			// 	background-size: 100% auto;
			// 	margin-left: 10rpx;
			// 	transform: translateY(2rpx);
			// }
		}

		&::after {
			display: block;
			content: "";
			width: 100%;
			height: 400rpx;
			background: linear-gradient(90deg, #d7b075, #aa8050);
			background-size: 100% auto;
			position: fixed;
			left: 0;
			top: 0;
		}
	}
</style>
